<template>
    <div class="background">
        <el-container>
            <el-header>



                <div class="top_title">
                    <img src="../../assets/top_title.png" />
                </div>


                <div class="map1"><img src="../../assets/lbx.png"></div>
                <div class="map2"><img src="../../assets/jt.png"></div>

            </el-header>
            <el-main>

                <div class="lt" v-if="is_choice == false">
                    <el-row :gutter="20" v-if="is_choice == false">
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <div id="f11" class='pic'></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>


                <div class="zt">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <div style="margin-top: 2vh; padding: 0; text-align: center;">
                                <span style="font-size: 200%; margin-right: 14vh; color: aliceblue;">详情月</span>
                                <span style="font-size: 200%; color: aliceblue;">总次数</span>
                            </div>
                            <div id="review_box" style="margin-top: 1.2vh; padding: 0;">
                                <ul ref="ul1" id="comment1">
                                    <li v-for="(item, index) in items" :key="index" @click="choice_time(item.label)">
                                        <div class="col">{{ item.month }}</div>
                                        <div class="col">{{ item.count }}</div>
                                    </li>
                                </ul>
                                <ul ref="ul2" id="comment2">
                                </ul>
                            </div>
                        </el-col>
                    </el-row>
                </div>


                <div class="ld" v-if="is_choice == false">
                    <el-row :gutter="20" v-if="is_choice == false">
                        <el-col :span="23">
                            <div class="grid-content bg-purple">
                                <div id="f12" class='pic'></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>


                <div class="yd" v-if="is_choice == false">
                    <el-row :gutter="20" v-if="is_choice == false">
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <div id="f15" class='pic' v-if="is_choice == false"></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div class="zd">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <div id="f13" class='pic'></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div class="ys" v-if="is_choice == false">
                    <el-row :gutter="20" v-if="is_choice == false">
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <div id="f14" class='pic'></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>




                <!-- <el-row :gutter="20" class="row" v-if="is_choice == false">
                    <el-col :span="6" class="p">
                        <el-carousel indicator-position="outside" v-if="is_choice == false">
                            <el-carousel-item v-for="item in imgArray" :key="item" v-if="is_choice == false">
                                <img :src="item" class="rightImg">
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                </el-row> -->


                <!-- ########################################################首页############################################################################### -->

                <el-row :gutter="20" v-if="is_choice == true">

                    <el-col :span="1">
                        <div style="color: rgba(0, 0, 0, 0);">1</div>
                    </el-col>
                </el-row>
                <div class="t21" v-if="is_choice == true">
                    <el-row :gutter="20" v-if="is_choice == true">
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <div id="f21" class='pic'></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div class="t22" v-if="is_choice == true">
                    <el-row :gutter="20" v-if="is_choice == true">
                        <el-col :span="22">
                            <div class="grid-content bg-purple">
                                <div id="f22" class='pic'></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>



                <el-row :gutter="20" class="row" v-if="is_choice == true">
                    <el-col :span="1">
                        <div style="color: rgba(0, 0, 0, 0);">1</div>
                    </el-col>
                </el-row>

                <div class="t23" v-if="is_choice == true">
                    <el-row :gutter="20" class="row" v-if="is_choice == true">
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <div id="f24" class='pic'></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div class="t24" v-if="is_choice == true">
                    <el-row :gutter="20" class="row" v-if="is_choice == true">
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <div id="f25" class='pic'></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>




            </el-main>



        </el-container>
    </div>
</template>
<!-- ##############################################3js3333333333333333333333333333333333333333############################################## -->
<script>
import theme from "../../assets/chalk.json";
import * as echarts from "echarts";
import { getMachinePic, getMachineDetail, getMachineTime, getEveryMachineDetail } from "@/api/echarts";
import { month_machine, get_month } from "@/api/echarts";
import qs from '../../store/qs'

var machine_bar_option = {
    animationDuration: 500,
    title: {
        text: '',
        left: 'center'
    },
    toolbox: {
        feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} 次'
        }
    },
    series: [
        {
            tooltip: {
                valueFormatter: function (value) {
                    return value + ' 次';
                }
            },
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        }
    ]
};

var all = {

};


var machine_detail_option = {
    animationDuration: 500,
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: [],
        textStyle: {
            fontSize: 20,
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
    ]
}

var id = 0;

var machine_time_option = {
    animationDuration: 500,
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: [],
        textStyle: {
            fontSize: 20,
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            data: []
        }
    ],
    series: [
        {
            name: '本月故障次数',
            type: 'bar',
            label: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '上月故障次数',
            type: 'bar',
            stack: 'Total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '月故障增长数',
            type: 'bar',
            stack: 'Total',
            label: {
                show: true,
                position: 'left'
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        }
    ]
}

var pie_option = {
    animationDuration: 10,
    title: {
        text: '机组故障次数环形图',
        left: 'center',
        top: -2,
        textStyle: {
            fontSize: 20,
        },
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '8%',
        left: 'center',
        textStyle: {
            fontSize: 20,
        },
    },
    series: [
        {
            top: 50,
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [],

        }
    ]
}


var shortage_rose_option = {
    title: {

        text: '故障发生次数预测',
        left: 'center'
    },
    legend: {
        top: 'bottom',
        textStyle: {
            fontSize: 20,
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    series: [
        {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 120],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            data: [
                { value: 17, name: '3月次数' },
                { value: 30, name: '4月次数' },
                { value: 14, name: '5月次数' },
                { value: 20, name: '6月次数' },
            ]
        }
    ]
}

var detail_ = {};

var which = -1;
var which2 = -1;
var data = {};
//**************辅助函数 ***********/


//******************************* */


//**********为了控制setInterval***********/




//*************************************//


//************这部分都是为了取值**************//
function getMachineDetail2() {
    getMachineDetail().then(response => {
        detail_ = response.data;
        setLine_Option();
    })
};


function getEveryMachineDetail2() {
    getEveryMachineDetail().then(response => {
        all = response.data;
        setBar_Option();
    })
}



function getMachineTime2() {
    getMachineTime().then(response => {
        data = response.data
        set_TimeBar_Option();

    })
}

//******************************************// 



//************这部分都是为了设置Option**************//
function setLine_Option() {
    var myChart = echarts.init(document.getElementById("f12"), "slef-theme");
    myChart.clear();
    var length = detail_.name.length;

    var k_length = detail_.time.length;
    var tmp = machine_detail_option;
    var max_h = Math.ceil(k_length / 4);

    which += 1;
    which %= max_h;
    tmp.legend.data = [];
    tmp.xAxis.data = [];
    tmp.series = [];

    if (which != max_h - 1) {
        tmp.legend.data = detail_.name;
        tmp.xAxis.data = detail_.time.slice(which * 4, which * 4 + 4);
        tmp.series = detail_.data;
        for (var i = 0; i < length; i++)
            tmp.series[i].data = tmp.series[i].data.slice(which * 4, which * 4 + 4);
    } else {
        tmp.legend.data = detail_.name;

        var cnt = k_length - (which) * 4;
        var l = (which) * 4;
        if (cnt < 4)
            l = (which) * 4 - (4 - cnt);

        tmp.xAxis.data = detail_.time.slice(l, length + 1);
        tmp.series = detail_.data;
        for (var i = 0; i < length; i++)
            tmp.series[i].data = tmp.series[i].data.slice(l, length + 1);
    }

    myChart.setOption(tmp);
}


function setBar_Option() {
    id += 1
    if (id >= all.name.length) id = 0;
    machine_bar_option.xAxis.data = all.time;
    machine_bar_option.series[0] = all.data[id][0];
    machine_bar_option.title.text = all.name[id] + '号机近6月故障情况';
    var myChart = echarts.init(document.getElementById("f14"), "slef-theme");
    myChart.setOption(machine_bar_option);
}



function set_TimeBar_Option() {

    var myChart = echarts.init(document.getElementById("f15"), "slef-theme");
    myChart.clear();

    var length = data.yAxis.length;
    var max_h = Math.ceil(length / 4);
    which2 += 1;
    which2 %= max_h;

    machine_time_option.legend.data = data.legend;

    var length = data.yAxis.length;
    var max_h = Math.ceil(length / 4);

    if (which2 != max_h - 1) {
        machine_time_option.yAxis[0].data = data.yAxis.slice(which2 * 4, which2 * 4 + 4);
        machine_time_option.series[0].data = data.data[0].slice(which2 * 4, which2 * 4 + 4);
        machine_time_option.series[1].data = data.data[1].slice(which2 * 4, which2 * 4 + 4);
        machine_time_option.series[2].data = data.data[2].slice(which2 * 4, which2 * 4 + 4);

    } else {

        var cnt = length - (which2) * 4;
        var l = (which2) * 4;
        if (cnt < 4)
            l = (which2) * 4 - (4 - cnt);
        machine_time_option.yAxis[0].data = data.yAxis.slice(l, length + 1);
        machine_time_option.series[0].data = data.data[0].slice(l, length + 1);
        machine_time_option.series[1].data = data.data[1].slice(l, length + 1);
        machine_time_option.series[2].data = data.data[2].slice(l, length + 1);

    }

    myChart.setOption(machine_time_option);
}



//******************************************// 


//***************循环函数*******************// 
var intervalID = 0

function myCallback() {
    getMachineDetail2();
    setBar_Option();
    getMachineTime2();
}


//******************************************// 





function getMachinePic3() {
    getMachinePic().then(response => {
        pie_option.series[0].data = response.data.data
        var myChart = echarts.init(document.getElementById("f11"), "slef-theme");
        myChart.setOption(pie_option);
    })
};


//*****************自动滚榜********************* */


let roll_timer = 0;

function rollStart() {
    // 上面声明的DOM对象为局部对象需要再次声明
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    if (ulbox.scrollTop >= ul1.scrollHeight) {
        ulbox.scrollTop = 0;
    } else if (ulbox.scrollTop % ulbox.clientHeight == 0) {
        document.getElementById('comment2').innerHTML = document.getElementById('comment1').innerHTML;
        ulbox.scrollTop = ulbox.scrollTop + 1;
    } else {
        ulbox.scrollTop++;
    }
}




//********************************************** */

export default {



    mounted() {
        var obj = theme;
        echarts.registerTheme("slef-theme", obj);
        this.get_month();
        getMachinePic3();
        getEveryMachineDetail2();
        getMachineDetail2();
        getMachineTime2();
        var myChart = echarts.init(document.getElementById("f13"), "slef-theme");
        myChart.setOption(shortage_rose_option);
        intervalID = setInterval(myCallback, 8000);

        this.setupDrag();
        this.roll(50);


    },
    destroyed() {
        window.clearInterval(intervalID);
        window.clearInterval(roll_timer);
    },
    methods: {

        roll(t) {
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            ul2.innerHTML = ul1.innerHTML;
            ulbox.scrollTop = 0; // 开始无滚动时设为0
            roll_timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
            // 鼠标移入div时暂停滚动
            ulbox.onmouseover = function () {
                clearInterval(roll_timer);
            }
            // 鼠标移出div后继续滚动
            ulbox.onmouseout = function () {
                roll_timer = setInterval(rollStart, t);
            }
        },


        setupDrag() {
            const ulbox = document.getElementById("review_box");
            ulbox.onmousedown = (e) => {
                this.isDragging = true;
                this.lastY = e.clientY;
            };
            ulbox.onmousemove = (e) => {
                if (this.isDragging) {
                    const deltaY = e.clientY - this.lastY;
                    ulbox.scrollTop -= deltaY;
                    this.lastY = e.clientY;
                }
            };
            ulbox.onmouseup = () => {
                this.isDragging = false;
            };
        },



        //切换界面
        choice_time(val) {
            this.month_form.month_value = val;
            window.clearInterval(intervalID);
            window.clearInterval(roll_timer);

            if (this.month_form.month_value == "null") {
                var myChart = echarts.init(document.getElementById("f21"), "slef-theme");
                myChart.resize();
                myChart.clear()
                var myChart = echarts.init(document.getElementById("f22"), "slef-theme");
                myChart.resize();
                myChart.clear()
                var myChart = echarts.init(document.getElementById("f24"), "slef-theme");
                myChart.resize();
                myChart.clear()
                var myChart = echarts.init(document.getElementById("f25"), "slef-theme");
                myChart.resize();
                myChart.clear();


                intervalID = setInterval(myCallback, 8000);
                this.is_choice = false;


                const loading = this.$loading({
                    lock: true,
                    text: '数据统计中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {

                    loading.close();

                    this.setupDrag();
                    this.roll(50);

                    var myChart = echarts.init(document.getElementById("f11"), "slef-theme");
                    myChart.resize();
                    var myChart = echarts.init(document.getElementById("f12"), "slef-theme");
                    myChart.resize();
                    var myChart = echarts.init(document.getElementById("f13"), "slef-theme");
                    myChart.resize();
                    myChart.setOption(shortage_rose_option);
                    var myChart = echarts.init(document.getElementById("f14"), "slef-theme");
                    myChart.resize();
                    var myChart = echarts.init(document.getElementById("f15"), "slef-theme");
                    myChart.resize();
                }, 500);




                getMachinePic3();
                getMachineDetail2();
                getEveryMachineDetail2();
                getMachineTime2();
            } else {
                window.clearInterval(intervalID);
                window.clearInterval(roll_timer);
                if (this.is_choice == false) {
                    var myChart = echarts.init(document.getElementById("f11"), "slef-theme");
                    myChart.resize();
                    myChart.clear()
                    var myChart = echarts.init(document.getElementById("f12"), "slef-theme");
                    myChart.resize();
                    myChart.clear()
                    var myChart = echarts.init(document.getElementById("f13"), "slef-theme");
                    myChart.resize();
                    myChart.clear()
                    var myChart = echarts.init(document.getElementById("f14"), "slef-theme");
                    myChart.resize();
                    myChart.clear()
                    var myChart = echarts.init(document.getElementById("f15"), "slef-theme");
                    myChart.resize();
                    myChart.clear()
                }
                this.is_choice = true;

                const loading = this.$loading({
                    lock: true,
                    text: '数据统计中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });


                setTimeout(() => {
                    loading.close();
                    window.clearInterval(roll_timer);
                    this.setupDrag();
                    this.roll(50);
                }, 500);


                month_machine(qs.stringify(this.month_form)).then(response => {

                    this.pie_option_one.series[0].data = response.data.pie_option;
                    this.pie_option_one.title.text = this.month_form.month_value.slice(0, 4) + '年' + this.month_form.month_value.slice(5, 8) + '月' + '机组故障发生总次数'
                    var myChart = echarts.init(document.getElementById("f21"), "slef-theme");
                    myChart.resize();
                    myChart.setOption(this.pie_option_one);
                    var myChart = echarts.init(document.getElementById("f22"), "slef-theme");

                    this.time_option_one.yAxis[0].data = response.data.time_option.number;
                    this.time_option_one.series[0].data = response.data.time_option.data_one;
                    this.time_option_one.series[1].data = response.data.time_option.data_two;
                    this.time_option_one.series[2].data = response.data.time_option.data_three;
                    myChart.resize()
                    myChart.setOption(this.time_option_one);

                    var myChart = echarts.init(document.getElementById("f24"), "slef-theme");
                    this.year_bar_option.title.text = '截至' + this.month_form.month_value + '故障全年累计'
                    this.year_bar_option.xAxis.data = response.data.year_bar_option.number;
                    this.year_bar_option.series[0].data = response.data.year_bar_option.data;
                    myChart.resize()
                    myChart.setOption(this.year_bar_option);

                    var myChart = echarts.init(document.getElementById("f25"), "slef-theme");
                    this.time_option_diff.series[0].data = response.data.time_option.data_one;
                    this.time_option_diff.series[1].data = response.data.time_option_diff.data_one;
                    this.time_option_diff.series[2].data = response.data.time_option_diff.data_two;
                    myChart.resize()
                    myChart.setOption(this.time_option_diff);

                    var myChart = echarts.init(document.getElementById("f13"), "slef-theme");
                    myChart.setOption(shortage_rose_option);
                });

            }
        },

        get_month() {
            get_month().then(res => {
                this.items = res.data.month;
            })
        }

    },

    data() {
        return {


            items: [
            ],

            isDragging: false,

            // 所有的数据记录


            imgArray: [
                require('../../assets/1.jpg'),
                require('../../assets/2.jpg')
            ],

            month_form: {
                month_value: 'null',
            },

            is_choice: false,


            time_option_diff: {
                title: {
                    text: '去年同期故障对比',
                    left: 'center',
                    top: '-1%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: ['本月故障次数', '去年同期故障次数', '缺陷同比增长'],
                    textStyle: {
                        fontSize: 20,
                    },
                    y: 'top',
                    top: '8%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',

                    },


                ],
                yAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        data: []
                    }
                ],
                series: [
                    {
                        name: '本月故障次数',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '去年同期故障次数',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '缺陷同比增长',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    }
                ]
            },


            year_bar_option: {
                title: {
                    text: '',
                    left: 'center',
                    top: '-1%',

                },
                tooltip: {
                    trigger: 'item'
                },

                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        label: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                fontSize: 20
                            }
                        },
                        data: [],
                        type: 'bar',
                    }
                ]
            },


            time_option_one: {
                title: {
                    text: '月故障对比',
                    left: 'center',
                    top: '-1%',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: ['本月故障次数', '上月故障次数', '环比增长次数'],
                    textStyle: {
                        fontSize: 20,
                    },
                    top: '8%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value'
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        data: []
                    }
                ],
                series: [
                    {
                        name: '本月故障次数',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '上月故障次数',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '环比增长次数',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    }
                ]
            },

            pie_option_one: {
                animationDuration: 10,
                title: {
                    top: '-1%',
                    text: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '8%',
                    left: 'center',
                    textStyle: {
                        fontSize: 20,
                    },
                },
                series: [
                    {
                        top: '10%',
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,

                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            },
                        },
                        labelLine: {
                            show: true
                        },
                        data: []
                    }
                ]
            }
        }

    }
};
</script>



<style scoped>
#review_box {
    width: 85%;
    height: 300px;
    overflow: hidden;
    margin: 50px auto;
    text-align: center;
    border-radius: 4px;
    background-color: transparent;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    height: 51px;
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px #ccc;
    align-items: center;
    color: white;
    margin-bottom: 0;
}

.col {
    flex: 1;
    padding: 0 5px;
    text-align: center;
    font-size: 20px;
}

/* 悬停样式 */
li:hover {
    background-color: #eaeaea;
    cursor: pointer;
    color: black;
}

/* 拖动样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 4px;
}




.background {
    background-image: url("../../assets/back3.png");
    background-color: #284B83;
    background-size: cover;
    min-height: 94.8vh;
}

.title {
    text-align: center;
    color: beige;
    font-weight: bolder;
    font-size: 300%;
    font-family: "KaiTi";
}

.title1 {
    width: 100%;
    text-align: center;
    color: beige;
    font-weight: bolder;
    font-size: 300%;
}

.pic {
    padding-top: 33px;
    height: 400px;
    width: 100%;
    padding-bottom: 40px;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.row {
    margin-top: 1%;
}

.rightImg {
    width: 600px;
    height: 100%;
}

.lt {
    position: absolute;
    top: 14%;
    left: 1%;
    width: 25%;
    height: 40%;
    background: url(../../assets/dataBg.png) no-repeat;
    background-size: 100% 100%;
}

.zt {
    position: absolute;
    right: 33.4%;
    top: 14%;
    width: 25%;
    height: 40%;
    background: url(../../assets/dataBg.png) no-repeat;
    background-size: 100% 100%;
}

.ld {
    position: absolute;
    width: 32%;
    height: 41%;
    bottom: 1%;
    background: url(../../assets/dataBg.png) no-repeat;
    background-size: 100% 100%;
}

.yd {
    position: absolute;
    bottom: 1%;
    right: 1%;
    width: 31%;
    height: 41%;
    background: url(../../assets/dataBg.png) no-repeat;
    background-size: 100% 100%;
}

.zd {
    position: absolute;
    bottom: 1%;
    right: 33.4%;
    width: 32%;
    height: 41%;
    background: url(../../assets/dataBg.png) no-repeat;
    background-size: 100% 100%;
}

.zt {
    position: absolute;
    top: 14%;
    right: 33.4%;
    width: 32%;
    height: 41%;
    background: url(../../assets/dataBg.png) no-repeat;
    background-size: 100% 100%;
}

.ys {
    position: absolute;
    top: 14%;
    right: 1%;
    width: 25%;
    height: 40%;
    background: url(../../assets/dataBg.png) no-repeat;
    background-size: 100% 100%;
}



.top_title {
    padding: 0;
    margin: 0;
}

.top_title {
    display: flex;
    /* 将容器设置为弹性布局 */
    justify-content: center;
    /* 水平方向居中对齐 */
    align-items: center;
    /* 垂直方向居中对齐 */
    height: 100%;
}

.top_title>img {
    width: 100%;
}

.ttoopp {
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    margin-top: -2%;
    margin-left: 7%;
}

.t21 {

    position: absolute;
    top: 16.3%;
    left: 1%;
    width: 32%;
    height: 42%;
    background: url(../../assets/dataBg.png) no-repeat;
    background-size: 100% 100%;

}

.t22 {
    position: absolute;
    top: 16.3%;
    right: 1%;
    width: 32%;
    height: 42%;
    background: url(../../assets/dataBg.png) no-repeat;

    background-size: 100% 100%;

}

.t24 {
    position: absolute;
    bottom: 1%;
    right: 1%;
    width: 32%;
    height: 40%;
    background: url(../../assets/dataBg.png) no-repeat;
    background-size: 100% 100%;
}

.t23 {
    position: absolute;
    bottom: 1%;
    left: 1%;
    width: 32%;
    height: 40%;
    background: url(../../assets/dataBg.png) no-repeat;
    background-size: 100% 100%;
}

.map1 {
    position: absolute;
    top: 20%;
    left: 32%;
    transform-origin: center;
    animation: myfirst2 15s infinite linear;
}

.map2 {

    position: absolute;
    top: -8%;
    left: 14.2%;
    transform-origin: center;
    animation: myfirst2 15s infinite linear;

}



@keyframes myfirst {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes myfirst2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>